<template>
  <div class="bofangView">
    <div class="zidingyi">
      <div class="table">
        <el-table
          :data="tableData"
          style="width: 100%"
          @row-click="handleRow"
          :row-class-name="tableRowClassName"
        >
          <el-table-column type="index" min-width="10"> </el-table-column>
          <el-table-column prop="saveName" label="自定义播放列表">
          </el-table-column>
        </el-table>
      </div>
      <div class="buttons">
        <button class="new" @click="newList">新 建 列 表</button>
        <button class="del">删 除 列 表</button>
        <button class="change">修 改 名 称</button>
      </div>
    </div>
    <div class="baohan">
      <div class="table">
        <el-table :data="currentMusic" style="width: 100%">
          <el-table-column type="index" min-width="10"> </el-table-column>
          <el-table-column prop="name" label="包含的音乐"> </el-table-column>
        </el-table>
      </div>
      <div class="buttons">
        <button class="add">添 加 歌 曲</button>
        <button class="del2">删 除 歌 单</button>
      </div>
    </div>
  </div>
  <div class="addList" v-if="isShow">
    <span>新建列表名：</span>
    <input type="text" v-model="newListName" />
    <button @click="submit">确 定</button>
  </div>
</template>
<script setup >
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import { getGroupListApi } from "@/api/modules/own";
import { addOwnMusicApi } from "../../../../../../api/modules/own";
const isShow = ref(false);
const tableData = ref([]);
const newListName = ref("");

const currentMusic = ref([]); //当前显示的音乐列表

const tableRowIndex = ref(0);
const newList = () => {
  isShow.value = true;
  newListName.value = "";
};

const getGroupList = async () => {
  try {
    const res = await getGroupListApi();

    tableData.value = res;

    console.log("111", tableData.value);

    if (tableData.value.length == 0) {
      console.log("woshi0");
      tableData.value.push({
        groupId: 1,
        saveName:'默认列表1',
        musicList: [],
      });

      tableData.value.push({
        groupId: 2,
        saveName:'默认列表2',
        musicList: [],
      });
      addOwnMusicApi(tableData.value);
    }

    currentMusic.value = tableData.value[0].musicList;
  } catch (error) {}
};
const submit = () => {
  isShow.value = false;
  // 判断是否为空
  if (newListName.value == "") {
    ElMessage({
      message: "列表名不能为空",
      type: "warning",
    });

    return;
  }

  // 判断是否重复

  const res = tableData.value.filter((item) => {
    return item.saveName == newListName.value;
  });
  console.log("res", res);
  if (res.length > 0) {
    ElMessage({
      message: "列表名不能重复",
      type: "warning",
    });
    return;
  }

  // 新增逻辑
  tableData.value.push({
    groupId: Number(`${tableData.value.length + 1}`),
    saveName: newListName.value,
    musicList: [],
  });
  addOwnMusicApi(tableData.value);
  getGroupList();
};

// 获取一个元素在数组中的下标
const getArrayIndex = (arr, obj) => {
  var i = arr.length;
  while (i--) {
    if (arr[i] === obj) {
      return i;
    }
  }
  return -1;
};

const handleRow = (row) => {
  currentMusic.value = row.musicList;
  tableRowIndex.value = getArrayIndex(tableData.value, row); // 获取当前点击行下标　　　 // ... 点击当前行，进行的操作    },
};

const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex === tableRowIndex.value) {
    return "highlight-row";
  }
  return "";
};
onMounted(() => {
  getGroupList();
});
</script>
<style lang="less" scoped>
@import url("./soundless/playList.less");
</style>